<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>校园租赁系统</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
</head>
<body class="yellow-skin">
<!--  首页头部区域  -->
    <header class="header header-light dark-text" th:fragment="header">
        <div class="container" style="border-bottom: 1px solid lightgray">
            <nav class="navigation navigation-landscape">
                <div class="nav-header">
                    <a class="nav-brand" href="#">西华大学在校租赁</a>
                </div>
                <div class="nav-menus-wrapper">
                    <ul class="nav-menu">
                        <li><a th:href="@{/index}" style="font-size: 15px;">首页</a> </li>
                        <li><a th:href="@{/searchHouses(rentType='whole')}" style="font-size: 15px;">整租</a> </li>
                        <li><a th:href="@{/searchHouses(rentType='share')}" style="font-size: 15px;">合租</a> </li>
                        <li><a th:href="@{/news/allNewsInfoDisplay}" style="font-size: 15px;">新闻资讯</a> </li>
                        <li><a th:href="@{/discuss/discussList}" style="font-size: 15px;">用户交流区</a> </li>
                    </ul>
                </div>
                <ul class="nav-menu nav-menu-social align-to-right">
                    <li th:if="${loginUserData==null}">
                        <a th:href="@{/login}" class="text-blue">
                            <i class="fas fa-user-circle mr-1"></i>
                            <span class="dn-lg">登录</span>
                        </a>
                    </li>
                    <li class="add-listing dark-bg" th:if="${loginUserData==null}">
                        <a th:href="@{/register}" class="theme-cl">
                            <i class="fas fa-arrow-alt-circle-right mr-1"></i>
                            注册
                        </a>
                    </li>
                    <li th:if="${loginUserData!=null}" style="margin-top: 15px; margin-bottom: -20px">
                        <div class="row">
                            <!--<div style="line-height: 4; font-size: 15px;">欢迎！<span th:text="${loginUserData.username}"></span></div>-->
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img th:src="@{|/assets/img/user/${loginUserData.userHead==null || loginUserData.userHead==''?'default-avatar.jpg':loginUserData.userHead}|}" class="rounded-circle" style="width: 40px;">
                                <span th:utext="${loginUserData.username}"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 100px;">
                                <span class="dropdown-item text-center text-secondary" th:switch="${loginUserData.role}">
                                    <span th:case="manager">管理员</span>
                                    <span th:case="owner">房东</span>
                                    <span th:case="customer">学生</span>
                                </span>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item text-center" th:href="@{/manager/housesManage}" th:if="${loginUserData.role=='manager'}">房源管理</a>
                                <a class="dropdown-item text-center" th:href="@{/news/newsList}" th:if="${loginUserData.role=='manager'}">新闻管理</a>
                                <a class="dropdown-item text-center" th:href="@{/news/publishNewsPage}" th:if="${loginUserData.role=='manager'}">发布新闻</a>
                                <a class="dropdown-item text-center" th:href="@{/manager/userList}" th:if="${loginUserData.role=='manager'}">用户管理</a>
                                <a class="dropdown-item text-center" th:href="@{/user/info}" th:if="${loginUserData.role!='manager'}">个人主页</a>
                                <a class="dropdown-item text-center" th:href="@{/order/orderList}" th:if="${loginUserData.role!='manager'}">合同管理</a>
                                <a class="dropdown-item text-center" th:href="@{/houseAdd}" th:if="${loginUserData.role=='owner'}">发布房源</a>
                                <a class="dropdown-item text-center" th:href="@{/myAddHouse}" th:if="${loginUserData.role=='owner'}">我的发布</a>
                                <a class="dropdown-item text-center" th:href="@{/mark/markList}" th:if="${loginUserData.role=='customer'}">我的收藏</a>
                                <a class="dropdown-item text-center" th:href="@{/feedback/feedbackList}" th:if="${loginUserData.role=='customer'}">我的反馈</a>
                                <a class="dropdown-item text-center" th:href="@{/feedback/feedbackList}" th:if="${loginUserData.role=='owner'}">反馈处理</a>
                                <a class="dropdown-item text-center" th:href="@{/updatePasswordPage}">密码修改</a>
                                <a class="dropdown-item text-center" th:href="@{/myLogout(path='/index')}">退出登录</a>
                            </div>
                        </div>
                    </li>

                </ul>
            </nav>
        </div>
    </header>

    <!-- 首页顶部搜索框 -->
    <div class="image-cover hero_banner" th:style="'background: #334aca url(' + @{/assets/img/banner-3.jpg} + ') no-repeat;'" data-overlay="1">
        <div class="container">
            <h1 class="big-header-capt mb-0">开启一段美好的租房生活吧！</h1>
            <p class="text-center mb-5">搜索你所在的城市的小区或房屋类型</p>
            <div class="full_search_box nexio_search lightanic_search hero_search-radius modern">
                <div class="search_hero_wrapping">
                    <!-- 搜索功能表单提交 -->
                    <form th:action="@{/searchHouses}" id="searchForm">
                        <div class="row">
                            <!-- 根据小区名称检索 -->
                            <div class="col-lg-3 col-md-2 col-sm-12">
                                <div class="form-group">
                                    <label>小区名称</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="address" class="form-control" style="border-bottom: 1px solid gray; width:240px;">
                                    </div>
                                </div>
                            </div>
                            <!-- 根据城市名称检索 -->
                            <div class="col-lg-2 col-md-2 col-sm-12">
                                <div class="form-group">
                                    <label>城市名称</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="city" class="form-control" style="border-bottom: 1px solid gray; width:140px;">
                                    </div>
                                </div>
                            </div>
                            <!-- 根据租房类型检索 -->
                            <div class="col-lg-2 col-md-2 col-sm-12">
                                <div class="form-group">
                                    <label>租房类型</label>
                                    <div class="input-with-icon">
                                        <select id="selectRentType" name="rentType" class="form-control">
                                            <option></option>
                                            <option value="none">不限</option>
                                            <option value="whole">整租</option>
                                            <option value="share">合租</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- 根据租金检索 -->
                            <div class="col-lg-3 col-md-2 col-sm-12">
                                <div class="form-group">
                                    <label>月租金范围</label>
                                    <div class="input-with-icon">
                                        <select id="price" name="priceRange" class="form-control">
                                            <option value="">不限</option>
                                            <option value="0;999">1000以内</option>
                                            <option value="1000;1999">1000-1999</option>
                                            <option value="2000;3999">2000-3999</option>
                                            <option value="4000;5999">4000-5999</option>
                                            <option value="6000;7999">6000-7999</option>
                                            <option value="8000;9999">8000-9999</option>
                                            <option value="10000;14999">10000-14999</option>
                                            <option value="15000;19999">15000-19999</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-12 small-padd">
                                <div class="form-group none">
                                    <button type="submit" class="btn search-btn">
                                        <i class="ti-search"></i>
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 首页检索内容区域 -->
    <section class="gray-simple">
        <div class="row justify-content-center">
            <div class="sec-heading center">
                <h2>高分优选</h2>
                <p>为您推荐了一些高分的未出租房源</p>
            </div>
        </div>
        <!-- 房子信息展示，内容循环 -->
        <div class="container">
            <div class="row" id="housesNew">
                <div class="col-lg-4 col-md-6 col-sm-12" th:each="houseHighScore:${housesHighScore}">
                    <div class="single_property_style property_style_2 modern">
                        <!-- 房子图片信息 -->
                        <div class="listing_thumb_wrapper">
                            <a th:href="@{|/houseDetail/${houseHighScore.id}|}"><img th:src="@{|/assets/img/house/${houseHighScore.thumbnailUrl}|}" class="img-fluid mx-auto"></a>
                        </div>
                        <!-- 房子文字信息 -->
                        <div class="property_caption_wrappers pb-0">
                            <div class="property_short_detail">
                                <div class="pr_type_status">
                                    <h4><a th:href="@{|/houseDetail/${houseHighScore.id}|}" th:text="${houseHighScore.title}">整租-德馨苑-3室一厅</a></h4>
                                    <div>
                                        <a th:text="${houseHighScore.address}">四川省成都市郫都区西华大学德馨x栋xxx号</a>
                                    </div>
                                </div>
                                <div class="property-real-price">
                                    <a class="cl-blue">￥<span class="price_status"></span><span th:text="${houseHighScore.monthRent}">1899</span>/月</a>
                                    <a th:if="${houseHighScore.score != null}" class="cl-blue" style="position:absolute; right: 25px;">
                                        <i class="ti-star" style="color: #f6c100; font-size: 20px;"></i>
                                        <span style="color: #ff6a00; font-size: 18px;"
                                              th:text="${#numbers.formatDecimal(houseHighScore.score, 1, 'COMMA', 2, 'POINT')}">5.00</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="modern_property_footer">
                            <div class="property-lists flex-1">
                                <ul>
                                    <li>
                                        <span class="flatcons"><img th:src="@{/assets/img/bed.svg}"></span><span th:text="${houseHighScore.bedroomNum}">3</span>卧室
                                    </li>
                                    <li>
                                        <span class="flatcons"><img th:src="@{/assets/img/bath.svg}"></span><span th:text="${houseHighScore.toiletNum}">3</span>卫生间
                                    </li>
                                </ul>
                            </div>
                            <div class="fp_types">
                                <a href="javascript:void(0)" class="markHouse" th:onclick="|submitMark(${houseHighScore.id})|">
                                    <i class="ti-heart"></i>
                                    <span th:id="|markHouseStatus${houseHighScore.id}|" th:text="${houseHighScore.isMarked?'已收藏':'收藏'}"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-bottom: -50px;">
                <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                    <a th:href="@{/searchHouses(orderType = 'score')}" class="btn btn-theme arrow-btn bg-2">
                        查看更多
                        <span><i class="ti-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="gray-simple" style="margin-top: -30px;">
        <div class="row justify-content-center">
            <div class="sec-heading center">
                <h2>最新推荐</h2>
                <p>为您推荐了一些最新发布的优质房源</p>
            </div>
        </div>
        <!-- 房子信息展示，内容循环 -->
        <div class="container">
            <div class="row" id="housesNew">
                <div class="col-lg-4 col-md-6 col-sm-12" th:each="house:${housesNew}">
                    <div class="single_property_style property_style_2 modern">
                        <!-- 房子图片信息 -->
                        <div class="listing_thumb_wrapper">
                            <a th:href="@{|/houseDetail/${house.id}|}"><img th:src="@{|/assets/img/house/${house.thumbnailUrl}|}" class="img-fluid mx-auto"></a>
                        </div>
                        <!-- 房子文字信息 -->
                        <div class="property_caption_wrappers pb-0">
                            <div class="property_short_detail">
                                <div class="pr_type_status">
                                    <h4><a th:href="@{|/houseDetail/${house.id}|}" th:text="${house.title}">整租-德馨苑-3室一厅</a></h4>
                                    <div>
                                        <a th:text="${house.address}">四川省成都市郫都区西华大学德馨x栋xxx号</a>
                                    </div>
                                </div>
                                <div class="property-real-price">
                                    <a class="cl-blue">￥<span class="price_status"></span><span th:text="${house.monthRent}">1899</span>/月</a>
                                    <a th:if="${house.score != null}" class="cl-blue" style="position:absolute; right: 25px;">
                                        <i class="ti-star" style="color: #f6c100; font-size: 20px;"></i>
                                        <span style="color: #ff6a00; font-size: 18px;"
                                              th:text="${#numbers.formatDecimal(house.score, 1, 'COMMA', 2, 'POINT')}">5.00</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="modern_property_footer">
                            <div class="property-lists flex-1">
                                <ul>
                                    <li>
                                        <span class="flatcons"><img th:src="@{/assets/img/bed.svg}"></span><span th:text="${house.bedroomNum}">3</span>卧室
                                    </li>
                                    <li>
                                        <span class="flatcons"><img th:src="@{/assets/img/bath.svg}"></span><span th:text="${house.toiletNum}">3</span>卫生间
                                    </li>
                                </ul>
                            </div>
                            <div class="fp_types">
                                <a href="javascript:void(0)" class="markHouse" th:onclick="|submitMark(${house.id})|">
                                    <i class="ti-heart"></i>
                                    <span th:id="|markStatus${house.id}|" th:text="${house.isMarked?'已收藏':'收藏'}"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-bottom: -50px;">
                <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                    <a th:href="@{/searchHouses(orderType = 'create_time')}" class="btn btn-theme arrow-btn bg-2">
                        查看更多
                        <span><i class="ti-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- 分页 -->
    <nav class="mt-5" th:if="${page != null && page.rows>0}" th:fragment="pagination"> <!--如果没有数据，则不显示-->
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <!--将访问路径放进来，实际执行的代码如：/index?current=1 ，如果还有条件，小括号里用“,”分隔即可，如(current=1,limit=5)-->
                <a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
            </li>
            <!--注意首页的“上一页”不可点，不可点是通过添加样式disable实现-->
            <li class="page-item" th:if="${page.current!=1}">   <!--其中的|page-item|表示竖线中的值为静态的，添加${}表示变量-->
                <a class="page-link" th:href="@{${page.path}(current=${(page.current)-1})}">&lt;</a>
            </li>
            <!--以此为模板循环，thymeleaf循环语法为th:each-->
            <!--thymeleaf中提供sequence方法，它生成从from开始到to的一个连续数组，即可从数字page.from循环到page.to-->
            <!--页码点亮的样式使用active实现，这里动态实现-->
            <li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
                <!--前面的i即用于每次引用的数字，即页码就是i--->
                <a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
            </li>
            <!--注意尾页的“下一页”不可点-->
            <li class="page-item" th:if="${page.current!=page.total}">
                <a class="page-link" th:href="@{${page.path}(current=${(page.current)+1})}">&gt;</a>
            </li>
            <!--逻辑和首页相同。在thymeleaf语法中，变量都通过表达式${}获取-->
            <li class="page-item">
                <a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>
            </li>
        </ul>
    </nav>
    <!-- 首页底部区域 -->
    <footer class="dark-footer skin-dark-footer style-2" style="padding-top: 0;" th:fragment="footer">
        <div class="footer-bottom">
            <div class="container">
                <p class="mb-0" style="color: white; text-align: center">西华大学 计算机科学与技术 2023 毕业设计 校园房屋租赁系统 作者：朱慧琳</p>
            </div>
        </div>
    </footer>
</body>
</html>